<template>
  <div id="personalCenter">
    <h1>个人中心</h1>
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="个人信息" name="first">
        <Information></Information>
      </el-tab-pane>
      <el-tab-pane label="排班" name="second">
        <Schedule></Schedule>
      </el-tab-pane>
      <el-tab-pane label="考勤" name="third">
        <Attendance></Attendance>
      </el-tab-pane>
      <el-tab-pane label="工资" name="fourth">
        <Salary></Salary>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import Information from '../../components/front/laj/Information'
  import Schedule from '../../components/front/laj/Schedule'
  import Attendance from '../../components/front/laj/Attendance'
  import Salary from '../../components/front/laj/Salary'
  export default {
    name: "PersonalCenter",
    components: {
      Information,
      Schedule,
      Attendance,
      Salary,
    },
    data() {
      return {
        activeName: 'first',
      }
    },
    methods: {
      handleClick(vueInstance) {
        console.log(vueInstance.name)
      }
    }
  }
</script>

<style scoped lang="less">
  #personalCenter {
    h1 {
      color: #909399;
      text-align: center;
    }
  }
</style>
